<template>
	<view class="wxlogin">
		<view class="san_weix">
			<view class="link"></view>
			<view class="san">
				其他登录方式
			</view>
			<view class="link"></view>
		</view>
		<view class="img_vx" @click="goWx">
			<uni-icons type="weixin" size="26" color="#fff"></uni-icons>
		</view>
		<!-- 微信登入 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="我再想想" confirmText="同意" title=" " @confirm="dialogConfirm"
				@close="dialogClose">
				<view class="wx_tishi">
					<view class="wx_deal">请阅读并同意<span class="link_a">《服务协议》</span>和<span class="link_a">《隐私政策》</span>
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>


		<!-- 获取微信头像昵称 -->
		<uni-popup type="bottom" :safe-area="false" ref="wxData">
			<view class="wx_data" v-if="userInfo">
				<view class="from_geli">
					<image src="/static/geli.png" mode="aspectFill" class="img_geli"></image>
					<view class="title_geli">
						格力服务+ 申请
					</view>
				</view>
				<view class="from_wxdata">
					<view class="title_wx">
						获取你的昵称、头像
					</view>
					<view class="wx_data_n_i">
						<image :src="userInfo?.avatarUrl" mode="aspectFill" class="img_wx"></image>
						<view class="title">
							<view class="name">
								{{userInfo?.nickName}}
							</view>
							<view class="wx_tib">
								微信昵称头像
							</view>
						</view>

					</view>
					<!-- <view class="use_other">
						使用其他头像和昵称
					</view> -->
				</view>
				<view class="btn_wx">
					<button type="primary" class="btn_reject btn" @click="onReject">拒绝</button>
					<button type="primary" class="btn_per btn" @click="onWxphone">允许</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		toRefs
	} from "vue"
	const props = defineProps({
		//子组件接收父组件传递过来的值
		checked: Boolean
	})
	//使用父组件传递过来的值
	const {
		checked
	} = toRefs(props)

	const emit = defineEmits(['is_agree'])
	const alertDialog = ref()
	const wxData = ref()

	const userInfo = ref(null)
	// 微信登入
	const goWx = () => {
		if (checked.value) {
			wxData.value.open()
		} else {
			alertDialog.value.open()
		}
	}
	// 我再看看
	const dialogClose = () => {

	}
	// 同意
	const dialogConfirm = () => {
		emit('is_agree', true)
		uni.getUserProfile({
			desc: 'Wexin', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
			lang: 'zh_CN',
			success: (res) => {
				wxData.value.open()
				userInfo.value = res.userInfo

			}
		})

	}
	/**
	 *
	 * 获取用户信息
	 */
	function getUserInfo() {
		// 展示加载框
		uni.showLoading({
			title: '加载中',
		});
		uni.getUserProfile({
			desc: '登录后可同步数据',
			success: async (obj) => {
				// this.userInfo = obj.userInfo;
				// 调用 action ，请求登录接口
				uni.login({
					provider: 'weixin',
					success: async (res) => {
						if (res.errMsg == 'login:ok') {
							// await this.loginAuth({
							//   userProfile: obj,
							//   appid: 'wx558xxxxxxxxxxxxxxx2',
							//   code: this.code,
							// });
						}
					},
				});
			},
			fail: () => {
				uni.showToast({
					title: '授权已取消',
					icon: 'error',
					mask: true,
				});
			},
			complete: () => {
				// 隐藏loading
				uni.hideLoading();
			},
		});
	}


	// 拒绝
	const onReject = () => {
		wxData.value.close()
	}
	// 允许
	const onWxphone = () => {
		wxData.value.close()
		uni.navigateTo({
			url: '/pages_user/login/wxphone'
		})

	}
</script>

<style lang="scss" scoped>
	.wxlogin {
		box-sizing: border-box;
		padding: 80rpx 60rpx 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		:deep(.uni-dialog-button-text) {
			font-size: 28rpx;
		}

		:deep(.uni-button-color) {
			color: #007cff;
		}

		:deep(.uni-dialog-title) {
			padding-top: 0;
		}

		:deep(.uni-dialog-content) {
			padding: 40rpx 0rpx !important;
		}

		.wx_tishi {
			display: flex;
			font-size: 28rpx;
			flex-wrap: nowrap;

			.wx_deal {
				color: #999;
				display: flex;
				flex-wrap: wrap;

				.link_a {
					color: #007cff;
					display: flex;
					flex-wrap: nowrap;
				}
			}
		}

		.san_weix {
			display: flex;
			align-items: center;
			justify-content: center;
			// margin-top: 60rpx;
			width: 100%;

			.link {
				width: 100rpx;
				height: 1rpx;
				background-color: rgb(229, 229, 229);
			}

			.san {
				margin: 0 30rpx;
				font-size: 24rpx;
				color: #505050;
			}
		}

		.img_vx {
			align-items: center;
			background-color: #5dbd67;
			margin: 20rpx 0 0;
			height: 60rpx;
			width: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
		}

		.wx_data {
			height: 500rpx;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
			background-color: #fff;
			padding: 30rpx 30rpx 40rpx;
			display: flex;
			flex-direction: column;

			.from_geli {
				display: flex;
				align-items: center;

				.img_geli {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
				}

				.title_geli {
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}

			.from_wxdata {
				flex: 1;

				.title_wx {
					font-size: 32rpx;
					font-weight: bold;
					padding: 30rpx 0;
				}

				.wx_data_n_i {
					display: flex;

					.img_wx {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.title {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin-left: 20rpx;

						.name {
							font-size: 28rpx;
							font-weight: bold;
							margin-bottom: 6rpx;
						}

						.wx_tib {
							font-size: 24rpx;
							color: #999;
						}
					}
				}

				.use_other {
					margin: 40rpx 0;
					font-size: 28rpx;
					color: #576b95;
				}
			}

			.btn_wx {
				display: flex;
				align-items: center;
				justify-content: space-around;

				.btn {
					width: 20%;
					height: 70rpx;
					font-size: 28rpx;
					font-weight: bold;
					line-height: 70rpx;
				}

				.btn_per {
					background-color: #5dbd67;
					color: #fff;
					margin-left: 14rpx;

					&::afte {
						border: none;
					}
				}

				.btn_reject {
					background-color: rgba(0, 0, 0, 0.05);
					color: #5dbd67;
					margin-right: 14rpx;

					&::afte {
						border: none;
					}
				}
			}
		}
	}
</style>